<template>
  <a-row type="flex" justify="center">
    <a-col
      :xs="24"
      :sm="24"
      :md="24"
      :lg="22"
      :xl="19"
      :style="
        GetIspc
          ? 'box-shadow: 0 40px 80px 0 rgb(0 0 0 / 30%); margin-top: 0px'
          : 'box-shadow: 0 40px 80px 0 rgb(0 0 0 / 30%); margin-top: 40px'
      "
    >
      <a-layout id="components-layout-demo-top" class="layout">
        <a-back-top />
        <a-drawer
          title="过滤条件"
          :width="300"
          :visible="is_drawer_visible"
          :body-style="{ paddingBottom: '80px' }"
          @close="onDrawerClose"
        >
          <div class="logo" />
          <!-- slider satrt  移动 -->
          <sider-search :state="search_result"> </sider-search>
          <!-- slider end 移动 -->
        </a-drawer>

        <a-layout-sider
         v-show="show_sider && !GetIspc"
          theme="light"
          width="25%"
          breakpoint="lg"
          collapsed-width="0"
          @collapse="onSearchSideCollapse"
          @breakpoint="onSearchSideBreakpoint"
        >
          <div class="logo" />
          <!-- slider  satrt  pc -->

          <sider-search :state="search_result"> </sider-search>
          <!-- slider end pc -->
        </a-layout-sider>

        <a-layout-content style="width: 72%; background: #fff">
          <a-row>
            <a-affix v-show="!is_show_sider_bar" style="text-align:right">
              <a-button @click="affixChange">
                <a-icon type="menu-unfold"></a-icon>
              </a-button>
            </a-affix>
          </a-row>
          <a-card>
            <a-row>
              <a-divider dashed />
            </a-row>
            <a-row>
              <!-- search start -->
              
               <search-box ref="child" />
              <!-- search end -->
            </a-row>

            <a-row>
              <a-divider dashed />
            </a-row>
            <!-- <a-row>
              <slot name="book">
                <div
                  v-for="(item, index) in getfilters"
                  :key="index"
                  style="height: 50px; line-height: 50px; float: left"
                >
                  <a-tag
                    v-for="(items, indexs) in item.values"
                    :key="indexs"
                    closable
                    @close="() => handleClose(item, indexs)"
                    style="padding: 5px; color: #ff5e0f"
                  >
                    {{ items }}
                  </a-tag>
                </div>
              </slot>
            </a-row> -->
            <a-row v-show="show_pagination && total_counts > 0 && !showdetail">
              <!-- 分页 start-->
              <search-pagination
                facets_lists="facets_lists"
                :sort_fields="sort_fields"
                :page_current="page_current"
                :total_counts="total_counts"
                :page_size_options="page_size_options"
                :page_size_default="page_size_default"
                :page_size="page_size"
              >
              </search-pagination>
              <!-- 分页 end -->
            </a-row>

            <a-row :gutter="2">
              <a-divider dashed />
            </a-row>
          </a-card>
  <!-- 检索列表 satrt -->
          <a-row>
            <a-list
              :grid="{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 4, xxl: 4 }" :loading="loading_over"
            >
              <a-list-item v-for="(book, index) in books" :key="index">

                <book-list
                  v-on:showbookid="ShowBookId"
                  :book="book"
                >
                </book-list>
              </a-list-item>
            </a-list>

          </a-row>
<!-- 检索列表 end -->
          <a-row v-show="show_pagination && total_counts > 0 && !showdetail">
            <a-card>
              <!-- 分页 start -->
              <search-pagination
                facets_lists="facets_lists"
                :sort_fields="sort_fields"
                :page_current="page_current"
                :total_counts="total_counts"
                :page_size_options="page_size_options"
                :page_size_default="page_size_default"
                :page_size="page_size"
              >
              </search-pagination>
              <!-- 分页 end -->
            </a-card>
          </a-row>
        </a-layout-content>
      </a-layout>
    </a-col>
  </a-row>
</template>

<script>
import BookList from "./common/BookList.vue";
import SiderSearch from "./common/SiderSearch";

// import BookInfo from "./BookInfo.vue";
import SearchBox from "./common/SearchBox.vue";
import SearchPagination from "./common/SearchPagination.vue";
export default {
  name : "QikanSearch",
  components: {
    "search-box": SearchBox,
    "sider-search": SiderSearch,
      "book-list": BookList,
      "search-pagination": SearchPagination,
  },
  data(){
      return {
    book_already_showing: false,
    is_show_sider_bar: false,
    is_drawer_visible: false,
    drawer_palcement: "left",
    bookinfo_title: "",
    is_bookinfo_spinning: false,
    intro: "",

    // booklist
    header: {},
    body: {},
    info: [],
    // headStyles: {
    //   color: "#2780e3",
    //   background: "#f5f5f5",
    // },
    // [{ fieldCode: "", fieldValue: "" }]

  }
        },

  computed: {

 // 判断设备
    GetIspc() {
      return navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
    },
    loading_over() {
      return this.$store.state[this.$store.state.Namedparent.name].books.loading_over;
    },
    rscontype() {
      return this.$store.state[this.$store.state.Namedparent.name].books
        .rscontype;
    },
    showdetail() {
      return this.$store.state[this.$store.state.Namedparent.name].books
        .showdetail;
    },
    getclassname() {
      return this.$store.state.Namedparent.name;
    },
    getfilters() {
      return this.$store.state[this.$store.state.Namedparent.name].books.qs
        .filters;
    },
    books() {
      // console.log(
      //   "computed MainContent books ",
      //   this.$store.state[this.$store.state.Namedparent.name].books.rs.content
      // );
      return this.$store.state[this.$store.state.Namedparent.name].books.rs
        .content;
    },
    show_sider() {
      return this.$store.state[this.$store.state.Namedparent.name].books
        .show_sider;
    },
    show_pagination() {
      return this.$store.state[this.$store.state.Namedparent.name].books
        .show_pagination;
    },
    sort_fields() {
      return this.$store.state[this.$store.state.Namedparent.name].books
        .fieldsAllow.sortFields;
    },

    page_current() {
      return this.$store.state[this.$store.state.Namedparent.name].books.qs.page ? this.$store.state[this.$store.state.Namedparent.name].books.qs.page : 1;
    },
    page_size() {
      return this.$store.state[this.$store.state.Namedparent.name].books.qs
        .pageSize;
    },
    page_size_options() {
      return this.$store.state[this.$store.state.Namedparent.name].books
        .fieldsAllow.pageSizeOptions;
    },
    page_size_default() {
      return this.$store.state[this.$store.state.Namedparent.name].books
        .fieldsAllow.defaultPageSize;
    },

    page_sort_order() {
      return this.$store.state[this.$store.state.Namedparent.name].books.rs
        .sortType;
    },
    page_order_by() {
      return this.$store.state[this.$store.state.Namedparent.name].books.rs
        .sortField;
    },
    total_counts() {
      return this.$store.state[this.$store.state.Namedparent.name].books.rs
        .total;
    },
    facets_lists() {
      return this.$store.state[this.$store.state.Namedparent.name].books.rs
        .facetsList;
    },

    params_search() {
      return this.$store.state[this.$store.state.Namedparent.name].books.qs;
    },
    search_result: {
      get() {
        var sr = {
          total_counts: this.$store.state[this.$store.state.Namedparent.name]
            .books.rs.total_counts,
          page_size: this.$store.state[this.$store.state.Namedparent.name].books
            .rs.pageSize,
          page_current: this.$store.state[this.$store.state.Namedparent.name]
            .books.rs.pageCount,
          facets_lists: this.$store.state[this.$store.state.Namedparent.name]
            .books.rs.facetsList,
          books: this.$store.state[this.$store.state.Namedparent.name].books.rs
            .content,
          deep: true,
        };
        return sr;
      },
    },
  },

  watch: {
  },
  methods: {




    //点击ok
    handleOk() {
      this.is_bookinfo_visible = false;
    },
    //点击cancel
    handleCancel() {
      this.is_bookinfo_visible = false;
    },
    showDrawer() {
      this.is_drawer_visible = true;
    },
    onDrawerClose() {
      this.is_drawer_visible = false;
    },
    onBookinfoClose() {
      this.is_bookinfo_visible = false;
    },
    onBookinfoShow() {
      this.is_bookinfo_visible = true;
    },
    onSearchSideCollapse(collapsed, type) {
      console.log(
        "onSearchSideCollapse",
        collapsed,
        type,
        this.is_show_sider_bar
      );
    },

    onSearchSideBreakpoint(broken) {
      this.is_show_sider_bar = !broken;
      if (this.is_show_sider_bar) {
        if (!broken) {
          this.is_drawer_visible = false;
        }
      }
    },
    affixChange() {
      this.is_drawer_visible = !this.is_drawer_visible;
    },
    ShowBookId(is_showing, marc_no, title) {
      this.bookinfo_title = title;
      this.book_already_showing = is_showing;
      this.is_bookinfo_visible = true;
      this.$refs.bookinfo_child.GetBookInfo(marc_no);
    },

    /**
     * 纸书检索
     */
    GetBooksLibsys: function () {
      this.is_init = false;
      this.$store.dispatch("GetBooks");
    },
    handleClose(e, indexs) {
    //  var fieldclassName = e.fieldName;
      var id = e.fieldName;
      var code = e.values[indexs];
      var do_search_book = false;
      this.$store.commit(
        this.$store.state.Namedparent.name + "/SearchSideUpdateFilters",
        {
          fieldName:id,
          value: code,
        },
        do_search_book
      );
      // this.$store.state[this.$store.state.Namedparent.name].books.qs.filters.forEach(item => {
      //     console.log(item)
      //     that.selectvalue.push(item.values[0])
      //   });
    },
  },
  mounted() {
        
         this.$store.commit(this.$store.state.Namedparent.name+"/changesearchtitle", this.$route.query.searchtitle);
         if(this.$route.query.searchtitle){
            this.$store.commit(
          this.$store.state.Namedparent.name + "/searchtype",
          0
        );
          this.$store
          .dispatch(this.$store.state.Namedparent.name + "/getsiderbar")
          .then(() => {
            this.$store.dispatch(
              this.$store.state.Namedparent.name + "/GetBooks",0
            );
          });
         }else{
            this.$store.commit(
              this.$store.state.Namedparent.name + "/searchtype",
              1
            );
            this.$store
          .dispatch(this.$store.state.Namedparent.name + "/getsiderbar")
          .then(() => {
            this.$store.dispatch(
              this.$store.state.Namedparent.name + "/GetBooks",1
            );
          });
         }
       
  },
};
</script>

<style scoped>
/deep/.amodal .ant-modal {
  width: 50% !important;
}
/* /deep/.ant-row {
  background: #fff;
} */
/deep/.ant-list-grid .ant-col > .ant-list-item {
  margin-bottom: -6px;
}
  /deep/.ant-collapse-header{
    color: blueviolet !important;
  }
  .text-muted{
    font-size: 15px;
  }
  .text-muted p{
    border-bottom: 1px dashed #EFEFEF;
    line-height: 2;
  }
  .text-muteds{
    text-align: center;
    margin: 5px auto;
  }
   .text-muteds p{
    margin: 0;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
  }
.btn-success {
    color: #ffffff;
    background-color: #3fb618;
    border-color: #3fb618;
    text-align: center;
    border: 1px solid transparent;
    padding: 10px 10px;
    font-size: 15px;
}
.btn-successread{
    
    display: inline;
    color: #ffffff;
    background-color: #3fb618;
    border-color: #3fb618;
    text-align: center;
    border: 1px solid transparent;
    padding: 10px 10px;
    font-size: 15px;
}
.btn-successread:hover{
  background: #25690f;
}
</style>